<script lang="ts" setup>
import type {
  VxeGridListeners,
  VxeGridProps,
  VxeTablePropTypes,
} from '#/adapter/vxe-table';
import type { ExtendMsgRecipientModel } from '#/api/basic/msg/model/extendMsgRecipientModel';

import { nextTick, ref, watch } from 'vue';

import { Button } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { useMessage } from '#/hooks/web/useMessage';

interface Props {
  value: ExtendMsgRecipientModel.ExtendMsgRecipientSaveVO[] | undefined;
}
interface Emits {
  (
    e: 'update:value',
    value: ExtendMsgRecipientModel.ExtendMsgRecipientSaveVO[],
  ): void;
}
const props = defineProps<Props>();
const emit = defineEmits<Emits>();
const { createConfirm } = useMessage();

const editRules = ref<VxeTablePropTypes.EditRules>({});

const gridOptions: VxeGridProps = {
  toolbarConfig: {
    export: false,
    zoom: false,
    print: false,
    refresh: false,
    custom: false,
    buttons: [{ code: 'myInsert', name: '新增' }],
  },
  columns: [
    {
      title: '序号',
      field: 'seq',
      type: 'seq',
      fixed: 'left',
      width: '50',
      align: 'center',
    },
    {
      title: '接收人',
      field: 'recipient',
      showOverflow: 'tooltip',
      align: 'center',
      editRender: {
        name: 'AInput',
        placeholder: '请点击输入',
        events: {
          change: () => {
            const recordset = gridApi.grid?.getRecordset();
            emit('update:value', recordset.insertRecords);
          },
        },
      },
    },
    {
      title: '扩展信息',
      field: 'ext',
      showOverflow: 'tooltip',
      align: 'center',
      editRender: {
        name: 'AInput',
        placeholder: '请点击输入',
        events: {
          change: () => {
            const recordset = gridApi.grid?.getRecordset();
            emit('update:value', recordset.insertRecords);
          },
        },
      },
    },
    {
      width: 160,
      title: '操作',
      align: 'center',
      slots: { default: 'action' },
      fixed: 'right',
    },
  ],
  pagerConfig: { enabled: false },
  height: '300px',
  keepSource: true,
  formConfig: {
    enabled: false,
  },
  keyboardConfig: {
    isArrow: true,
    isDel: true,
    isEnter: true,
    isTab: true,
    isEdit: true,
    isChecked: true,
  },
  mouseConfig: { selected: true },
  editConfig: { trigger: 'dblclick', mode: 'cell', showStatus: true },
  proxyConfig: { enabled: false },
};

const gridEvents: VxeGridListeners = {
  toolbarButtonClick({ code }) {
    switch (code) {
      case 'myInsert': {
        gridApi.grid?.insertAt({}, -1);

        const recordset = gridApi.grid?.getRecordset();
        emit(
          'update:value',
          recordset?.insertRecords as ExtendMsgRecipientModel.ExtendMsgRecipientSaveVO[],
        );
        break;
      }
      default: {
        break;
      }
    }
  },
};

const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions,
  gridEvents,
});

watch(
  () => props.value,
  async (
    value: ExtendMsgRecipientModel.ExtendMsgRecipientSaveVO[] | undefined,
  ) => {
    await nextTick();
    const list = value ?? [];
    gridApi.grid?.createData(list);
  },
  { immediate: true },
);

function handleDelete(row: any) {
  createConfirm({
    iconType: 'warning',
    title: `您确定要删除吗？`,
    onOk: async () => {
      try {
        gridApi.grid?.remove(row);

        const recordset = gridApi.grid?.getRecordset();
        emit(
          'update:value',
          recordset?.insertRecords as ExtendMsgRecipientModel.ExtendMsgRecipientSaveVO[],
        );
      } catch {}
    },
  });
}
</script>

<template>
  <Grid :edit-rules="editRules">
    <template #action="{ row }">
      <Button danger @click="handleDelete(row)">删除</Button>
    </template>
  </Grid>
</template>
